<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>key的原理</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <div id="root">
      <h2>列表渲染错误方式，元素下标</h2>
      <button @click="addPerson">添加一个人员信息</button>
      <ul>
        <!-- 如果不写，Vue默认会使用index作为key -->
        <!-- 使用下标作为key，需确定元素顺序不会发生该表，新的数据按照顺序插入。 -->
        <!-- 底层是因为虚拟DOM对比Diff算法，下标匹配。  复用真实DOM输入框导致数据错乱，另外效率低，会产生没有必要的DOM更新 -->
        <li v-for="(p,index) in persons" :key="index">
          {{p.name}}-{{p.age}}
          <!-- 后面添加其他标签时，可以暴露出问题 -->
          <input type="text" />
        </li>
      </ul>

      <hr />

      <h2>列表渲染正确方式，对象唯一标识</h2>
      <button @click="addPerson">添加一个人员信息</button>
      <ul>
        <!-- 使用对象的唯一标识判断，不会造成数据错乱 -->
        <!-- 同样会进行虚拟DOM比对，但根据对象标识判断，  新的数据不会在原始DOM中，所以会重新生成 -->
        <!-- 效率高，结构都是复用 -->
        <li v-for="(p,index) in persons" :key="p.id">
          {{p.name}}-{{p.age}}
          <input type="text" />
        </li>
      </ul>
    </div>
  </body>

  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",
      data: {
        //创建一个集合，集合内都是对象
        persons: [
          {
            //每个对象都应该有唯一标识
            id: "001",
            name: "张三",
            age: 18,
          },
          {
            id: "002",
            name: "里斯",
            age: 20,
          },
          {
            id: "003",
            name: "王五",
            age: 22,
          },
        ],
      },
      methods: {
        addPerson() {
          const newPerson = { id: "004", name: "老刘", age: 40 };
          //往集合的前面放
          this.persons.unshift(newPerson);
        },
      },
    });
  </script>
</html>
